<template>
    <div class="comments">
        <div class="comments-count">评论 <span v-if="page.total">{{ page.total }}</span></div>
        <template v-if="comments.length">
            <van-list
                v-model:loading="loading"
                ref="listRef"
                :finished="finished"
                :finished-text="'评论到底了~'"
                :offset="page.pageSize"
                @load="onLoadComments"
            >
                <Comment
                    v-for="comment in comments"
                    :create-user-id="createUserId"
                    :key="comment.id"
                    :comment="comment"
                    @reply="toReply"
                    @play-to-specified-point="playToSpecifiedPoint"
                    @refresh-comments="refreshComments"
                />
            </van-list>
        </template>
        <template v-else>
            <div class="no-comment">
                <img
                    class="comment-img"
                    :src="require('@/assets/images/no-comment.png')"
                    alt=""
                />
                <p class="comment-text">暂无评论</p>
                <p class="comment-tips">期待你的精彩发言</p>
            </div>
        </template>

        <CommentInput
            v-model:visible="commentInputState.visible"
            :reply-name="commentInputState.userNameOfReply"
            :maxlength="commentInputState.maxlength"
            :show-image="commentInputState.showImage"
            :accept="commentInputState.accept"
            @submit="onCommentInputSubmit"
        />
    </div>
</template>

<script setup>
import Comment from '@/components/comment/comment';
import CommentInput from '@/components/comment-input/comment-input';
import {onMounted, reactive, ref} from 'vue';
import {useRoute} from 'vue-router';

const emit = defineEmits(['play-to-specified-point']);
const route = useRoute();

/* 发布回复 */
let replyCallback;
let replyInfo;
const commentInputState = reactive({
    visible: false,
    userNameOfReply: '',
    maxlength: 500,
    showImage: true,
    accept: 'image/png,image/jpeg,image/gif',
})
function onCommentInputSubmit(data) {
    G_transmit('addComment', {
        data: {
            bizId: route.params.moocId,
            itemId: route.query.catalogueId,
            ...replyInfo,
            imageJson: JSON.stringify(data.fileList),
            comments: data.message,
        }
    }).then(() => {
        if (replyCallback) {
            replyCallback();
        }

        commentInputState.visible = false;
        G_dispatchEvent('toast', { message: '提交成功', type: 'success'});
    })
}
/* 回复 */
function toReply(comment, cb) {
    commentInputState.userNameOfReply = comment.createUserName;
    replyCallback = cb;
    replyInfo = {
        commentLevel: 2,
        parentCommentId: comment.id,
        parentCommentUserId: comment.createUserId,
        parentCommentUserName: comment.createUserName,
    }
    commentInputState.visible = true;
}

/* 从指定位置开始播放视频 */
function playToSpecifiedPoint(data) {
    emit('play-to-specified-point', data);
}

/* 上拉加载更多... */
const finished = ref(true);
const loading = ref(false);
function onLoadComments() {
    page.pageIndex++;
    queryCoursewareComments();
}

/* 评论列表 */
const comments = ref([]);
const page = reactive({
    pageIndex: 1,
    pageSize: 10,
    total: 0,
});
function queryCoursewareComments() {
    G_transmit('queryCommentList', {
        queries: {
            moocId: route.params.moocId,
            itemId: route.query.catalogueId,
            pageIndex: page.pageIndex,
            pageSize: page.pageSize,
        }
    }).then(({data}) => {
        if (page.pageIndex <= 1) {
            comments.value = data.rows || [];
        } else {
            comments.value = comments.value.concat(data.rows || []);
        }
        page.total = data.total;

        finished.value = data.rows.length < page.pageSize;
        setTimeout(() => {
            loading.value = false;
        }, 10);
    })
}

/* 目录创建人 */
const createUserId = ref('');
function getLessonReviewDetail() {
    G_transmit('getLessonReviewDetail', {
        queries: {
            moocId: route.params.moocId
        }
    }).then(({data}) => {
        createUserId.value = data.createId
    })
}

onMounted(() => {
    queryCoursewareComments();
    getLessonReviewDetail();
});

/* 刷新评论列表 */
function refreshComments() {
    page.pageIndex = 1;
    queryCoursewareComments();
}
defineExpose({
    refreshComments
})
</script>

<style lang="scss" scoped>
.comments {
    background: #FFFFFF;
    padding: 18px 0;

    .comments-count {
        line-height: 24px;
        font-size: 15px;
        padding: 0 15px;
    }

    .no-comment {
        padding: 40px 0;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .comment-img {
            width: 60%;
        }
        .comment-text {
            font-size: 16px;
            color: #171a1d;
            line-height: 24px;

        }
        .comment-tips {
            font-size: 14px;
            margin-top: 4px;
            color: #a2a3a4;
            line-height: 22px;
        }
    }
}
</style>